<template>
  <van-index-bar @click="scrollTo" :sticky="true" highlight-color="black" :index-list="indexList" @change="totast">
      <div v-for="(data,index) in citylist" :key="index">
        <van-index-anchor class="citycolor" :index="data.Type" />
        <van-cell @click="backid(item.name,item.cityId)" v-for="(item,index) in data.list" :key="index" :title="item.name" />
      </div>
 </van-index-bar>
</template>
<style scoped>
/* .van-index-bar__sidebar {
  padding-right: 4px 3px 0  1px;
} */
.van-index-anchor--sticky {
  background-color: #f4f4f4;
}
.citycolor{
  background-color: #f4f4f4;
}
.van-cell:after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1.5px solid #ededed;
    color: #ededed;
    -webkit-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(.5);
    -ms-transform: scaleY(.5);
    transform: scaleY(.5);
}
</style>
<script>
import http from '@/Util/http'
import Vue from 'vue'
import { IndexBar, IndexAnchor, Cell, Toast } from 'vant'
Vue.use(IndexBar).use(Cell).use(Toast)
Vue.use(IndexAnchor)
export default {
  porps: {

  },
  data () {
    return {
      citylist: []
    }
  },
  computed: {
    indexList () {
      return this.citylist.map((item) => item.Type)
    }
  },
  methods: {
    Cityfilter (cities) {
      // console.log(cities)
      const Type = []
      const City = []
      for (let code = 65; code < 91; code++) {
        Type.push(String.fromCharCode(code))
      }
      Type.forEach((el) => {
        const list = cities.filter((item) => item.pinyin.slice(0, 1).toUpperCase() === el)
        if (list.length > 0) {
          City.push({
            Type: el,
            list: list
          })
        }
      })
      return City
    },
    totast (index) {
    //   Toast(index)
    },
    scrollTo (index) {
      console.log(index)
    },
    backid (name, id) {
      console.log(name, id)
      this.$store.commit('changecityname', name)
      this.$store.commit('changecityid', id)
      this.$router.back()
    }
  },
  mounted () {
    http({
      url: '/gateway?k=3887051',
      headers: {
        'X-Host': 'mall.film-ticket.city.list'
      },
      method: 'get'
    }).then(res => {
    //   console.log(res.data.data)
      this.citylist = this.Cityfilter(res.data.data.cities)
      console.log(this.citylist)
    })
  }
}
</script>
